当前位置：flash8.0教程－基础教程

《登录界面》的制作过程

《登录界面》的制作方法

【实例说明】：

本例制作一个身份验证程序，输入用户名和密码后，就会转入到相应的页面；否则会转入错误的页面的效果。

【操作步骤】：

一、制作背景

1. 新建一个文档，大小可按默认设置。双击“图层1”；将其命名为“背景层”；
2. 在“背景层”的第一帧，请参照下图，选择矩形工具,随意制作一个背景。

1. 分别选中该层的第2、3帧，按键盘上的F6键“插入关键帧”；

二、制作文字层

1. 单击时间轴上的添加新图层按钮，再添加一个新“图层2”；然后双击“图层2”将其命名为“文字层”；
2. 选中该层第1帧；选中工具栏上的文本工具，参照下图输入如下文本信息（包括：“登录界面”、“用户名”、“次数”、“密码”、“提示：名：luotao 密：181818”）；

1. 制作上面的文本框：（1）选中工具栏上的矩形工具，在“用户名”后面拖出一个填充色为白色的矩形框；（2）参照此方法，分别再在“密码”、次数后面也拖出如图的矩形框；
2. 添加三个文本框：（1）选中工具栏上的文本工具，打开属性面板；选择“输入文本”、字体颜色选黑色；然后在“用户名”后面的矩形框上面拖出一个大小相同的输入文本框；然后选中该输入文本框，在变量名中命名为“user”;(2) 选中工具栏上的文本工具，打开属性面板；选择“输入文本”、字体颜色选黑色；然后在“密码”后面的矩形框上面拖出一个大小相同的输入文本框；然后选中该输入文本框，在变量名中命名为“code”;(3) 选中工具栏上的文本工具，打开属性面板；选择“动态文本”、字体颜色选黑色；然后在“用户名”后面的矩形框上面拖出一个大小相同的动态文本框；然后选中该动态文本框，在变量名中命名为“num”;
3. 最后选中“文字层”的第2帧，按键盘上的“F7”键“插入空白关键帧；

三、制作按钮层

1. 单击时间轴上的添加新图层按钮，再添加一个新“图层3”；然后双击“图层3”将其命名为“按钮层”；
2. 单击“窗口”/“公用库”/“按钮”；打开相应的按钮文件夹，从中选择两种按钮；然后拖放到舞台上即可；如下图：

第1帧的两个按钮

1. 选中文本工具在第1个按钮上面输入“提交”文字，并适当调整该文字在按钮上的位置；在第2个按钮上面输入“返回”文字，并适当调整该文字在按钮上的位置；
2. 选中“按钮层”的第2、3帧，分别按F6键“插入关键帧”；然后分别删除第2、3帧中文字；（具体参照下图）

第2帧的1个按钮，并用直线工具绘制一个对勾

第2帧的1个按钮，并用直线工具绘制一个×号

四、代码层

1. 单击时间轴上的添加新图层按钮，再添加一个新“图层4”；然后双击“图层4”将其命名为“代码层”；
2. 选中第2帧，按“F7”键“插入空白关键帧”；
3. 选中第1帧，添加如下代码：

stop();

num=0;

1. 选中“按钮层”第1帧的“提交”按钮，添加如下代码：

on (release) {

//单击登录按钮

num = num+1;

//单击一次登录按钮,变量num增加1

if ((user == "luotao") && (code == "181818")) {

//如果user文本框的内容是"luotao",且code文本框的内容是"181818"

gotoAndStop(2);

//跳转到第2帧并停止

} else {

if (num == 3) {

//如果单击3次"登录"按钮

gotoAndStop(3);

//跳转并停止到第3帧

}

}

}

1. 选中“按钮层”的第1帧“返回”按钮，添加如下代码：

on (release) {

//单击取消按钮

num = 0;//num文本框为0

user = "";//user文本框为空

code = "";//code文本框为空

}

1. 选中“按钮层”的第2帧“返回”按钮，添加如下代码：

on (release) {

num=0;

user="";

code="";

gotoAndStop(1);

}

1. 选中“按钮层”的第3帧“返回”按钮，添加如下代码：

on (release) {

num = 0;

user = "";

code = "";

gotoAndStop(1);

}

• 最后按“Ctrl+Enter”组合键测试影片。